import React, { PropTypes } from 'react';
import { Button, Icon } from 'antd';
import QueueAnim from 'rc-queue-anim';
import TweenOne, { TweenOneGroup } from 'rc-tween-one';
import BannerAnim, { Element } from 'rc-banner-anim';
import 'rc-banner-anim/assets/index.css';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';

const hdp_1_tit = require('../../assets/banner/hdp_1_tit.png')
const hdp_1_txt = require('../../assets/banner/hdp_1_text.png')
const hdp_1_tu = require('../../assets/banner/hdp_1_tu.png')

const hdp_2_tit = require('../../assets/banner/hdp_2_tit.png')
const hdp_2_txt = require('../../assets/banner/hdp_2_text.png')
const hdp_2_tu = require('../../assets/banner/hdp_2_tu.png')


const BgElement = Element.BgElement;
class Banner extends React.Component {
  render() {
    const props = { ...this.props };
    delete props.isMode;
    const childrenData = [
      {
        title: '<img width="100%" src="https://zos.alipayobjects.com/rmsportal/HqnZZjBjWRbjyMr.png" />',
        content: '一个高效的页面动画解决方案',
        button: 'Learn More',
      },
      {
        title: '<img width="100%" src="https://zos.alipayobjects.com/rmsportal/HqnZZjBjWRbjyMr.png" />',
        content: '一个高效的页面动画解决方案',
        button: 'Learn More',
      },
    ];
    const childrenD = [{
      title: hdp_1_tit,
      content: hdp_1_txt,
      image: hdp_1_tu
    }, {
      title: hdp_2_tit,
      content: hdp_2_txt,
      image: hdp_2_tu
    }]
    const childrenToRender = childrenD.map((item, i) => {
      const title = item.title;
      const content = item.content;
      const image = item.image;
      return (<Element
        key={i}
        prefixCls="banner-user-elem"
      >
        <BgElement
            className={`bg bg${i}`}
          key="bg"
        />
        <div className={`${props.className}-outer`}>
        <QueueAnim
          type={['bottom', 'top']} delay={200}
          className={`${props.className}-title`}
          key="text"
          id={`${props.id}-wrapperBlock${i}`}
        >
          <div key="l" className={`${props.className}-title-l`}>
            <img key="tit" className={`${props.className}-title-l-tit${i}`} src={title} />
            <img key="txt" className={`${props.className}-title-l-txt${i}`} src={content} />
          </div>
          <div key="r" className={`${props.className}-title-r`}>
            <img key="img" className={`${props.className}-title-r-img${i}`} src={image} />
          </div>
        </QueueAnim>
        </div>
      </Element>);
    });
    return (
      <OverPack
        {...props}
      >
        <TweenOneGroup
          key="banner"
          enter={{ opacity: 0, type: 'from' }}
          leave={{ opacity: 0 }}
          component=""
        >
          <BannerAnim
            key="banner"
            type="grid"
          >
            {childrenToRender}
          </BannerAnim>
        </TweenOneGroup>
        <TweenOne
          animation={{ y: '-=20', yoyo: true, repeat: -1, duration: 1000 }}
          className={`${props.className}-icon`}
          style={{ bottom: 40 }}
          key="icon"
        >
          <Icon type="down" />
        </TweenOne>
      </OverPack>
    );
  }
}

Banner.propTypes = {
  className: PropTypes.string,
};

Banner.defaultProps = {
  className: 'banner1',
};

export default Banner;
